<template>
  <div class="factory-customers-all">
    <div class="factory-page-list">
      <div class="search-header">
        <el-input v-model="searchInput" size="small" placeholder="输入搜索关键字" @keyup.13.native="onSearch">
          <i class="el-icon-close" slot="suffix" @click="clearSearch" v-if="searchInput.length"></i>
          <el-button slot="append" type="primary" icon="el-icon-search" @click="onSearch"></el-button>
        </el-input>
      </div>
      <template v-if="groupList.length || loading">
        <el-collapse v-model="activeCollapse" accordion>
          <el-collapse-item v-for="(item, index) in groupList" :key="item.type" :name="item.type">
            <div slot="title" class="group-title">
              <i
                class="icon-toggle"
                :class="activeCollapse === item.type ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
              ></i>
              <span class="name">{{ item.title }}</span>
            </div>
            <div class="factory-list">
              <template v-if="item.page.results.length">
                <ul class="list-wrap">
                  <li
                    class="list-item"
                    :class="{ 'is-active': cust.tagId === selectTag.tagId }"
                    v-for="cust in item.page.results"
                    :key="cust.tagId"
                    @click="selectItem(cust)"
                  >
                    <icon-svg name="iconResTeam"></icon-svg>
                    <span class="list-name elli">{{ cust.derivedName }}</span>
                    <el-tooltip effect="dark" placement="top" :enterable="false">
                      <span slot="content">
                        创建人：{{ $name(cust, 'creatorNname', 'creatorUser') }}
                        <br />
                        <br />
                        创建时间: {{ cust.createTm }}
                      </span>
                      <icon-svg name="iconPreview"></icon-svg>
                    </el-tooltip>
                  </li>
                </ul>
                <el-pagination
                  style="text-align: right"
                  :current-page="item.page.params.currentPageNum"
                  :page-size="item.page.params.pageSize"
                  background
                  layout="total, prev, pager, next"
                  :total="item.page.totalSize"
                  :pager-count="5"
                  small
                  @current-change="handleCurrentChange($event, index)"
                >
                </el-pagination>
              </template>
              <div class="no-record" v-else>暂无客群</div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </template>
      <div class="no-record" v-else>暂无分组</div>
    </div>
    <factory-content-container ref="factoryContainer" type="all" @callback="refresh"></factory-content-container>
  </div>
</template>

<script>
import FactoryContentContainer from './factory-content-container'
import $factory from './api'
export default {
  name: 'FactoryCustomersAll',
  components: { FactoryContentContainer },
  data() {
    return {
      loading: false,
      searchInput: '',
      activeCollapse: -1,
      groupList: [
        {
          type: 1,
          title: '我发布的',
          page: {
            results: [],
            params: {
              ascs: [],
              descs: [],
              currentPageNum: 1,
              pageSize: 10,
              queryParams: {
                type: 1,
                isRelease: 1
              },
              descPriority: false
            },
            totalSize: 0
          }
        },
        {
          type: 2,
          title: '其他',
          page: {
            results: [],
            params: {
              ascs: [],
              descs: [],
              currentPageNum: 1,
              pageSize: 10,
              queryParams: {
                type: 2,
                isRelease: 1
              },
              descPriority: false
            },
            totalSize: 0
          }
        }
      ],
      selectTag: {}
    }
  },
  watch: {
    activeCollapse() {
      this.getResults()
    }
  },
  methods: {
    init() {
      if (this.activeCollapse < 0) this.activeCollapse = 1
      this.getResults()
    },
    getResults() {
      this.$nextTick(() => {
        const typeItem = this.groupList.find(item => item.type === this.activeCollapse)
        const index = this.groupList.findIndex(item => item.type === this.activeCollapse)
        if (typeItem) {
          this.loading = true
          this.$refs.factoryContainer.setLoading(true)
          let params = typeItem.page.params
          params.queryParams.derivedName = this.searchInput.trim()
          $factory.getAllDerivesPage(typeItem.page.params).then(({ data }) => {
            if (data && data.code === '0') {
              this.groupList[index].page.results = data.data.records
              this.groupList[index].page.totalSize = data.data.totalSize
              let maxPageNum = Math.ceil(data.data.totalSize / typeItem.page.params.pageSize) || 1
              if (typeItem.page.params.currentPageNum > maxPageNum) {
                typeItem.page.params.currentPageNum = maxPageNum
                this.getResults()
              }
              this.$forceUpdate()
              if (data.data.records.length && !this.selectTag.tagId) this.selectItem(data.data.records[0])
              else {
                this.loading = false
                this.$refs.factoryContainer.setLoading(false)
                if (this.selectTag.tagId) {
                  const target = this.groupList[index].page.results.find(item => item.tagId === this.selectTag.tagId)
                  if (target) this.selectTag = target
                }
              }
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.loading = false
            this.$refs.factoryContainer.setLoading(false)
          })
        }
      })
    },
    handleCurrentChange(num, index) {
      this.groupList[index].page.params.currentPageNum = num
      this.getList()
    },
    reset() {
      this.groupList.forEach(item => {
        item.page.results = []
        item.page.params = {
          ascs: [],
          descs: [],
          currentPageNum: 1,
          pageSize: 10,
          queryParams: {
            type: item.type,
            isRelease: 1
          },
          descPriority: false
        }
        item.page.totalSize = 0
      })
    },
    onSearch() {
      this.reset()
      this.getResults()
    },
    clearSearch() {
      this.searchInput = ''
      this.onSearch()
    },
    selectItem(item) {
      this.selectTag = item
      this.$refs.factoryContainer.update(item)
    },
    refresh() {
      this.getResults()
    }
  }
}
</script>

<style lang="scss">
.factory-customers-all {
  height: 100%;
  height: 100%;
  .search-header {
    margin-bottom: 10px;
    padding: 1px 10px 0 10px !important;
    .el-input {
      width: 100% !important;
    }
    .el-input__suffix {
      top: 5px;
    }
    .el-input__suffix-inner {
      font-size: 18px;
      color: #4d82e9;
    }
  }
  .el-collapse-item__header {
    font-size: 16px;
    height: 45px;
    padding: 0 10px;
    line-height: 45px;
    &:hover {
      background-color: #efefef;
    }
  }
  .el-collapse-item__arrow {
    display: none;
  }
  .icon-toggle {
    font-size: 18px;
    color: #4d82e9;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
  .no-record {
    text-align: center;
  }
  .factory-list {
    padding: 0 25px;
    .list-item {
      padding: 5px;
      svg {
        width: 15px;
        height: 15px;
      }
    }
  }
  .group-title {
    width: 100%;
    position: relative;
    padding-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .name {
      margin-left: 10px;
    }
  }
}
</style>
